<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Budget</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
        <meta name="description" content="">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery-migrate-1.1.1.min.js"></script>
        <script src="js/jquery-1.10.0.ui.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script src="cdv-plugin-fb-connect.js"></script>
        <script src="facebook_js_sdk.js"></script>
        <script src="js/jquery.slimscroll.js"></script>
        <script src="js/common.js"></script>
        <script src="js/common_alert_redirect.js"></script>
        <script src="js/bannerRotator2.js"></script>
        <script src="js/util.js"></script>
        <script src="js/budget.js"></script>        
    </head>
    <body class="login">
        <div class="page-wrap body-wrap" id="page-wrap">
            <div class="tray" id="page-tray">
                <div class="user-panel transition">
                    <div class="user-panel-wrap">
                        <a class="wd-menu-list-item wd-menu-list-item-home" href="home.html">
                            <img src="img/home-icon.png" class="wd-img-menu-home"/>
                            <span class="wd-txt-menu-event">Home</span>
                        </a>
                        <a class="wd-menu-name" href="setting.html"></a>
                        <div class="wd-padding"></div>
                        <div class="user-menu" id="user-menu">
                            <a class="wd-menu-list-item" href="event.html">
                                <img src="img/event-icon.png" class="wd-img-menu-event"/>
                                <span class="wd-txt-menu-event">Events</span>
                            </a>
                            <a class="wd-menu-list-item" href="guestList.html">
                                <img src="img/guestlist-icon.png" class="wd-img-menu-guestlist"/>
                                <span class="wd-txt-menu-event">Contact List</span>
                            </a>
                            <a class="wd-menu-list-item" href="toDoList.html">
                                <img src="img/todos-icon.png" class="wd-img-menu-todos"/>
                                <span class="wd-txt-menu-event">To-Dos</span>
                            </a>
                            <a class="wd-menu-list-item" href="budget.html">
                                <img src="img/budget-icon.png" class="wd-img-menu-budget"/>
                                <span class="wd-txt-menu-event">Budget</span>
                            </a>
                            <a class="wd-menu-list-item wd-menu-list-item-end" href="selectEvent.html">
                                <img src="img/invite-icon.png" class="wd-img-menu-invite"/>
                                <span class="wd-txt-menu-event">Invite Guests</span>
                            </a>
                            <div class="wd-padding"></div>
                            <a class="wd-menu-list-item" href="appInfo.html">
                                <img src="img/appinfo-icon.png" class="wd-img-menu-appinfo"/>
                                <span class="wd-txt-menu-event">App Info</span>
                            </a>
                            <a class="wd-menu-list-item" href="setting.html">
                                <img src="img/setting-icon.png" class="wd-img-menu-setting"/>
                                <span class="wd-txt-menu-event">Settings</span>
                            </a>
                            <a class="wd-menu-list-item" href="javascript:void(0)" id="logout">
                                <img src="img/logout-icon.png" class="wd-img-menu-logout"/>
                                <span class="wd-txt-menu-event">Sign Out</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="page-content transition profile-page" id="page-content">
                    <!--form-->                        
                    <div class="navbar">
                        <div class="left-col"><img src="img/user_panel_toggle.png" id="user-panel-toggle" class="user-panel-toggle" /></div>
                        <a class="right-col" href="addBudget.html"><img src="img/guest-list-add.png" class="guest-list-add" /></a>
                        <div class="title-col">Budget</div>
                    </div>
                    <div class="wd-content">
                        <div id="notice_msg" class="notice_msg">
                            <div></div>
                            
                        </div>
                        <div class="wd-budget-number" id="unused_money">
                            <!-- unused money  -->
                        </div>

                        <div class="wd-budget-goal-spent">
                            <div class="wd-budget-goal">
                                <span class="wd-budget-goal-txt">Goal</span>
                                <div class="wd-budget-input">
                                    <div class="wd-budget-goal-ico btn-edit-total-budget">
                                        <img src="img/edit-icon.png" class="wd-budget-edit-ico ico_edit_goal" />
                                        <img src="img/tick.png" class="wd-budget-edit-ico ico_save_goal" style="display:none;" />
                                    </div>
                                    <div class="wd-budget-inputtxt">
                                        <div>
                                            <input type="text" id="budget_goal" value="" readonly/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="wd-budget-spent">
                                <span class="wd-budget-goal-txt">Spent</span>
                                <div class="wd-budget-input">
                                    <div class="wd-budget-inputtxt">
                                        <div>
                                            <input type="text" id="budget_spent" value="" readonly/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="wd-budget-title">
                            Budget Breakdown
                        </div>

                        <div id="budget_items">
                            <!--list item-->
                        </div>
                        <input type="hidden" name="page" id="page" value="1"/>                        
                        <input type="hidden" name="end_paging" id="end_paging" value=""/>
                    </div>
                    <div class="slide-page wd-fix">
                        <div align="center">
                            <div id="bannerRotator">
                                
                            </div>
                        </div>
                    </div>
                    <!--end form-->
                </div>
            </div>
        </div>
        <div class="wd-loading" style="display:none">
            <div classloading="full-overlay-black"></div>
            <div class="wrap-popup-bg-opacity-follow">
                <img src="img/loading/ajax-fb-loader.gif" title="loading"/>
            </div>
        </div>
    </body>
</html>

